<template>
  <el-container style="height: 100%; min-width: 600px">
    <el-header>
      <el-row>
        <el-button type="success" icon="el-icon-plus" @click="centerDialogVisible = true" circle></el-button>
      </el-row>
    </el-header>
    <el-main>
      <!-- 表格 -->
      <el-table v-loading="tableLoading" type="index" align="center" :data="tableData" stripe style="width: 100%"
        height="100%" :row-style="tableRow">
        <el-table-column fixed prop="task_id" label="任务ID" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_creator_id" label="创建者ID" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_receiver_id" label="接受者ID" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_name" label="任务名称" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_msg" label="任务描述" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_gold" label="任务赏金" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_status" label="任务状态" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_s_time" label="任务开始时间" width="" align="center">
        </el-table-column>
        <el-table-column prop="task_e_time" label="任务结束时间" width="" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-main>
    <el-dialog title="新增任务" :visible.sync="centerDialogVisible" width="40%" center>
      <!-- 内容 -->
      <el-form label-position='left' label-width="80px" :model="formLabelAlign">
        <el-form-item label="任务名">
          <el-input v-model="formLabelAlign.task_name"></el-input>
        </el-form-item>
        <el-form-item label="任务赏金">
          <el-input v-model="formLabelAlign.task_gold"></el-input>
        </el-form-item>
        <el-form-item label="任务时间">
          <el-date-picker v-model="formLabelAlign.value1" type="datetimerange" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input type="textarea" v-model="formLabelAlign.task_msg"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTask">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { HttpGet, HttpPost } from '@/api/http'
export default {
  name: "Task",
  data() {
    return {
      tableRow: {
        'height': '100px'
      },
      tableLoading: true,
      tableData: [],
      centerDialogVisible: false,
      formLabelAlign: {
        value1: [],
        task_msg: '',
        car_gold: '',
        task_name: ''
      },
    };
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      this.tableLoading = true
      try {
        let res = await HttpGet({ url: "/task/all" })
        if (res.data) {
          this.tableData = res.data.sort((a, b) => b.task_id - a.task_id)
          this.tableLoading = false
        } else {
          this.$message.error('数据加载失败')
          this.tableLoading = false
        }
      }
      catch (error) {
        console.log(error);
        this.$message.error('服务器异常')
        this.tableLoading = false
      }
    },
    async addTask() {
      try {
        let res = await HttpPost({
          url: "/task/add",
          data: {
            task_name: this.formLabelAlign.task_name,
            task_gold: this.formLabelAlign.task_gold,
            task_s_time: this.formLabelAlign.value1[0],
            task_e_time: this.formLabelAlign.value1[1],
            task_creator_id: JSON.parse(sessionStorage.getItem('user')).user_id,
            task_msg: this.formLabelAlign.task_msg
          }
        })
        if (res.data.code == 200) {
          this.getData()
          this.$message.success('新增任务成功')
          this.centerDialogVisible = false
        } else {
          this.$message.error('新增任务失败')
        }
      }
      catch (error) {
        console.log(error);
        this.$message.error('服务器异常')
      }
    },
    async handleDelete(index, rows) {
      try {
        let res = await HttpGet({
          url: "/task/delete",
          params: {
            task_id: rows.task_id
          },
        })
        if (res.data.code == 200) {
          this.tableData.splice(index, 1)
          this.$message.success('成功,删除任务成功！')
        } else {
          this.$message.error('错误，删除任务失败！');
        }
      }
      catch (error) {
        console.log(error);
        this.$message.error('错误，服务器异常！');
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}

.el-main {
  min-width: 600px;
  height: 100%;
  overflow: hidden;
}

/* 任务列表图片 */
.el-table img {
  width: 80px;
  height: 80px;
}
</style>
